<template>
  <van-search
      shape="round"
      input-align="center"
      placeholder="找搭子"
      @click="toSearch"
  />
  <user-list :user-list="userList" :loading="loading" :page-size="pageSize" :total="total"
             @handle-page-change="handlePageChange"/>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios";
import UserList from "../components/UserList.vue";
import {useRouter} from "vue-router";

const router = useRouter();
const toSearch = () => {
  router.push('/search');
}
const loading = ref(true);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const userList = ref([]);
onMounted(() => {
  getUsers();
});
const getUsers = async () => {
  const response = await myAxios.post('/user-manage/recommend', {
    pageNum: pageNum.value,
    pageSize: pageSize.value
  });
  loading.value = false;
  if (response.data) {
    userList.value = response.data.map(item => ({
      ...item,
      tags: JSON.parse(item.tags)
    }));
    total.value = response.total;
  }
};
const handlePageChange = (page: number) => {
  pageNum.value = page;
  getUsers();
};

</script>
